<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法4：v-model双向绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：v-model双向绑定</h1>
            <h3>我们可以用v-model指令在表单input,textarea,select等元素进行双向绑定
                它会根据控件的类型自动选取正确的方法来更新元素，v-model会忽略所有表单元素的value,checked，selected等属性的初始值
                它始终会将当前的Javascript状态视为数据的正确来源
                
            </h3>
            <h3>1.单行文本框</h3>
            <input type="text" v-model="singleText">{{singleText}}
            <h3>2.多行文本框</h3>
            <textarea cols="10" rows="10" v-model="multiText"></textarea>{{multiText}}
            <h3>3.单选框</h3>
            <h4>单选框在实际中是不能单独使用的，一般是两个以上，要设置一个v-model统一变量，那么就可以实现radiogroup的效果</h4>
            <input type="radio" value="A" v-model="radioValue">上课
            <input type="radio" value="B" v-model="radioValue">下课
            <input type="radio" value="C" v-model="radioValue">吃饭
            <input type="radio" value="D" v-model="radioValue">睡觉
            {{radioValue}}
            <h3>4.单个复选框：单个复选框常用来true或false的选择</h3>
            <input type="checkbox" v-model="toggleValue">是否天生丽质
            {{toggleValue}}
            <h3>5.多个复选框：v-model接收数组类型的变量</h3>
            <input type="checkbox" value="漂亮" v-model="checkedValues">A.回眸一笑百媚生
            <input type="checkbox" value="纤细" v-model="checkedValues">B.体轻能为掌上舞
            <input type="checkbox" value="爱情" v-model="checkedValues">C.在天愿做比翼鸟
            <input type="checkbox" value="弹琴" v-model="checkedValues">D.大珠小珠落玉盘
            {{checkedValues.join(',')}}
            <h3>6.单项下拉选择框</h3>
                <select>
                    <option value="杭州">杭州</option>
                    <option value="宁波">宁波</option>
                    <option value="温州">温州</option>
                    <option value="台州">台州</option>
                    <option value="福州"></option>
                    <option value="湖州"></option>
                </select>
                {{singleSelect}}
                <h3>7.多项下拉选择框</h3>
                    <select multiple v-model="multiSelect">
                        <option value="1">几处早莺争暖树</option>
                        <option value="2">谁家新燕啄春泥</option>
                        <option value="3">浅草才能没马蹄</option>
                    </select>
                    {{multiSelect.join(',')}}
            <h1>知识点2：v-model修饰符</h1>
                    <h3>1.lazy修饰符 v-model在每次input事件触发后将输入框的数据与数据变量进行同步，添加lazy修饰符后，转变成与change事件同步</h3>
                    <input type="text" v-model.lazy="text">{{text}}
                    <h3>2.number修饰符。如果想自动将用户输入值转化为数值型，可以加.number修饰符</h3>
                    <input type="text" v-model.number="num">
                    {{num+1}}
                    <h3>3.trim 如果想要自动过滤前后的空白字符，可以加trim修饰符</h3>
                    <input type="text" v-model.trim="text">
                    {{text+'你好！'}}






    </div>
    
</body>
</html>


<script>
    const appConn=Vue.createApp({
        data(){
            return{
                singleText:'',
                multiText:'',
                radioValue:'',
                toggleValues:false,
                checkedValues:[],
                singleSelect:'',
                multiSelect:[],
                text:'',
                num:'1'
            }

        }

    }).mount("#app")
</script>